<template>
  <view class="logistics">
    <view class="logistics-info">
      <view class="log">
        <image src="/static/logo.png" mode="aspectFill" class="img"></image>
        <view class="desc">
          <view class="desc-title">{{ info.shipping_name }}</view>
          <view class="desc-code">
            <view>快递单号：{{ info.shipping_number }}</view>
            <view class="copy" @click="copy">复制</view>
          </view>
        </view>
      </view>
      <view class="order">
        <image
          mode="aspectFit"
          class="order-icon"
          :src="`${STATIC_URL2}car.png`"
        ></image>
        <view class="order-info">
          <view class="code"> 订单编号：{{ info.order_num }} </view>
          <view class="adddress"> 收货地址：{{ info.address }} </view>
        </view>
      </view>
      <view class="step">
        请于其他物流平台查询详细物流地址
        <!-- <u-steps 
				:list="stepList" 
				direction="column" 
				mode="number"
				icon="car"
				current="1"
				active-color="#CD8544">
        </u-steps> -->
        <!-- <template v-for="(item, index) in tracesData">
          <TrackNode
            :key="index"
            :is-first="index === tracesData.length - 1"
            :is-newest="index === 0"
            :is-main-node="item.isMainNode"
            :node-data="item"
          ></TrackNode>
        </template> -->
      </view>
    </view>
    <view class="logistics-btn">
      <view class="btn" @click.stop="confirm"> 确认收货</view>
    </view>
  </view>
</template>

<script>
import { logisticsInfo,stateUpdate } from "@/utils/api";
// import TrackNode from "./components/trackNode";
export default {
  // components: {
  //   TrackNode,
  // },
  data() {
    return {
      id: "",
      stepList: [
        { name: "已下单 2020-12-13 19:00:12" },
        { name: "在配送" },
        { name: "已签收" },
      ],
      tracesData: [
        {
          acceptStation: "包裹已被吴亦发同学签收", // 节点描述
          createTime: "2019-10-24 15: 27: 16",
          status: "COMPLETE", // 节点状态
          phone: "", // 电话
          statusName: "已签收", // 节点标题
          isMainNode: true, // 是否主节点，主节点前方展示icon
        },
        {
          acceptStation: "由派送员蔡小坤同志配送，电话：",
          createTime: "2019-10-24 15: 26: 41",
          status: "DELIVERING",
          phone: "16677778888",
          statusName: "运输中",
          isMainNode: true,
        },
        {
          acceptStation: "已到XXX小区快递点",
          createTime: "2019-10-24 15: 26: 41",
          status: "DELIVERING",
          phone: "",
          statusName: "运输中",
          isMainNode: false,
        },
        {
          acceptStation: "已到海宁集散中心",
          createTime: "2019-10-24 15: 26: 18",
          status: "DELIVERING",
          phone: "",
          statusName: "运输中",
          isMainNode: false,
        },
        {
          acceptStation: "已到杭州集散中心",
          createTime: "2019-10-24 15: 26: 07",
          status: "DELIVERING",
          phone: "",
          statusName: "运输中",
          isMainNode: false,
        },
        {
          acceptStation: "包裹已到达余杭区集散中心",
          createTime: "2019-10-24 15: 25: 54",
          status: "DELIVERING",
          phone: "",
          statusName: "运输中",
          isMainNode: false,
        },
        {
          acceptStation: "快递员已上门取件",
          createTime: "2019-10-24 15: 25: 17",
          status: "DELIVERING",
          phone: "",
          statusName: "已揽收",
          isMainNode: false,
        },
        {
          acceptStation: "等待快递员上门揽件",
          createTime: "2019-10-24 15: 25: 00",
          status: "WATTING_DELIVER",
          phone: "",
          statusName: "已发货",
          isMainNode: true,
        },
        {
          acceptStation: "您的包裹正在打包",
          createTime: "2019-10-24 15: 24: 00",
          status: "WATTING_DELIVER",
          phone: "",
          statusName: "待发货",
          isMainNode: false,
        },
        {
          acceptStation: "订单支付成功，等待商家发货",
          createTime: "2019-10-24 15: 22: 30",
          status: "PAYED",
          statusName: "已支付",
          isMainNode: true,
        },
        {
          acceptStation: "订单提交成功",
          createTime: "2019-10-24 15: 22: 00",
          status: "WATTING_PAY",
          statusName: "已下单",
          isMainNode: true,
        },
      ],
      info: {},
      steps: [],
    };
  },
  onLoad({ id }) {
    this.id = id;
    this.initInfo();
  },
  methods: {
    initInfo() {
      logisticsInfo({
        id: this.id,
      }).then((resp) => {
        console.log("物流信息", resp);
        if (resp.code == 200) {
          this.info = resp.data;
          for (let i = resp.data.list.length - 1; i > 0; i--) {
            this.list.push({
              createTime: resp.data.list[i].AcceptTime,
              acceptStation: resp.data.list[i].AcceptStation,
              status: "DELIVERING",
              phone: "16677778888",
              statusName: "运输中",
              isMainNode: true,
            });
          }
        }
      });
    },
    // 确认收货
    confirm() {
      uni.showModal({
        title: "确认收货吗？",
        success: ({ confirm }) => {
          if (confirm) {
            stateUpdate({
              id: this.info.id,
              status: this.info.status,
            }).then((resp) => {
              console.log("取消订单", resp);
              if (resp.code == 200) {
                this.initInfo();
              }
            });
          }
        },
      });
    },
    // 复制
    copy(){
      uni.setClipboardData({
        data:this.info.shipping_number,
        success:()=>{
          uni.showToast()
        }
      })
    }
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}
.logistics {
  &-info {
    background-color: #ffffff;
    margin-bottom: 190rpx;
    @include wrapper;
    .log {
      width: 100%;
      padding: 30rpx 0;
      @include border;
      display: flex;
      align-items: center;
      .img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 4rpx;
        margin-right: 25rpx;
      }
      .desc {
        width: calc(100% - 125rpx);
        &-title {
          font-size: 30rpx;
          color: #cd8544;
          line-height: 50rpx;
        }
        &-code {
          font-size: 26rpx;
          display: flex;
          align-items: center;
          line-height: 50rpx;
          .copy {
            width: 70rpx;
            font-size: 22rpx;
            text-align: center;
            line-height: 40rpx;
            border: 1rpx solid #181616;
            border-radius: 4rpx;
            margin-left: 30rpx;
          }
        }
      }
    }
    .order {
      padding: 25rpx 0;
      display: flex;
      align-items: center;
      &-icon {
        width: 40rpx;
        height: 35rpx;
        margin-right: 25rpx;
      }
      &-info {
        font-size: 26rpx;
        line-height: 40rpx;
        .code {
        }
      }
    }
    .step {
      margin-top: 6rpx;
      background-color: #ffffff;
      min-height: 590rpx;
    }
  }
  &-btn {
    width: 100%;
    background-color: #ffffff;
    height: 100rpx;
    padding-top: 22rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .btn {
      width: 157rpx;
      line-height: 55rpx;
      text-align: center;
      font-size: 30rpx;
      color: #ffffff;
      background: #cd8544;
      border-radius: 8px;
      margin-left: 563rpx;
    }
  }
}
</style>
